<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div::after,ul::after{
        content: '';
        display: block;
        clear: both;
    }
    .banner {
        width: 590px;
        height: 470px;
        position: relative
    }

    .banner img {
        width: 100%;
        height: 100%;
    }

    .banner .indicator {

        width: 150px;
        height: 20px;
        position: absolute;
        left: 46px;
        bottom: 10px;

    }

    .indicator .indicator-dot {
        display: block;
        float: left;
        width: 10px;
        height: 10px;
        position: relative;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .indicator .indicator-dot::before {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        left: -5px;
        top: -5px;
        border-radius: 50%;
        box-sizing: border-box;
        opacity: .2;
    }

    .indicator .indicator-dot::after {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        border: 2px solid #fff;
        border-radius: 50%;
        box-sizing: border-box;
        opacity: .4;
    }

    .indicator-dot.active {
        background-color: #fff;
    }
</style>

<body>
    <div class="banner">
        <div class="indicator">
            <i class="indicator-dot active"></i><i class="indicator-dot"></i><i class="indicator-dot"></i><i
                class="indicator-dot"></i><i class="indicator-dot"></i><i class="indicator-dot"></i><i
                class="indicator-dot"></i><i class="indicator-dot"></i>
        </div>
        <img src="https://img13.360buyimg.com/da/s1180x940_jfs/t1/177356/9/49523/51499/6706f18fF0b5b5dbe/b17cee9656defdf4.jpg.avif"
            alt="">
    </div>
</body>
<script></script>

</html>